<script setup>
import { CloseBold, EditPen, List, Management, School, TrendCharts, User, UserFilled } from '@element-plus/icons-vue'

import { userInfoService } from '@/api/teacher.js'
import useUserInfoStore from '@/stores/userInfo.js'
import { useTokenStore } from '@/stores/token.js'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const tokenStore = useTokenStore();

const userInfoStore = useUserInfoStore();

const getUserInfo = async () => {
  let result = await userInfoService();
  userInfoStore.setInfo(result.data);
}

getUserInfo();

const router = useRouter();

const handleCommand = () => {
  ElMessageBox.confirm(
    '您确认要退出吗?',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      tokenStore.removeToken()
      userInfoStore.removeInfo()
      await router.push('/StudentSystem/login')
      ElMessage({
        type: 'success',
        message: '退出登录成功',
      })
    })
    .catch(async () => {
      await router.push('/StudentSystem/')
      ElMessage({
        type: 'info',
        message: '用户取消了退出登录',
      })
    })
}
</script>

<template>
  <el-container class="layout-container">

    <el-header>
      <div class="title"><strong>学生信息管理系统</strong></div>
    </el-header>

    <el-container>

      <el-aside width="200px">
        <el-menu active-text-color="#ffd04b" background-color="#232323" router text-color="#fff">
          <el-menu-item index="/StudentSystem/student/manage">
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>学生信息</span>
          </el-menu-item>
          <el-menu-item index="/StudentSystem/grades/manage">
            <el-icon>
              <List />
            </el-icon>
            <span>成绩列表</span>
          </el-menu-item>
          <el-menu-item index="/StudentSystem/classes/manage">
            <el-icon>
              <Management />
            </el-icon>
            <span>班级管理</span>
          </el-menu-item>
          <el-menu-item index="/StudentSystem/course/manage">
            <el-icon>
              <Management />
            </el-icon>
            <span>课程管理</span>
          </el-menu-item>
          <el-sub-menu index="statistic">
            <template #title>
              <el-icon>
                <TrendCharts />
              </el-icon>
              <span>信息统计</span>
            </template>
            <el-menu-item index="/StudentSystem/statistics/studentStatistic">
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>学生家庭住址统计</span>
            </el-menu-item>
            <el-menu-item index="/StudentSystem/statistics/gradesStatistic">
              <el-icon>
                <List />
              </el-icon>
              <span>各课程成绩统计</span>
            </el-menu-item>
            <el-menu-item index="/StudentSystem/statistics/ClassStudentNumStatic">
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>各班人数统计</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="personal">
            <template #title>
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item index="/StudentSystem/teacher/info">
              <el-icon>
                <User />
              </el-icon>
              <span>基本资料</span>
            </el-menu-item>
            <el-menu-item index="/StudentSystem/teacher/updatePwd">
              <el-icon>
                <EditPen />
              </el-icon>
              <span>重置密码</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="logout" @click="handleCommand">
            <el-icon>
              <CloseBold />
            </el-icon>
            <span>退出登录</span>
          </el-menu-item>
        </el-menu>

      </el-aside>
      <el-container>
        <!-- 中间区域 -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <!-- 底部区域 -->
        <el-footer></el-footer>
      </el-container>

    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;

  .el-aside {
    background-color: #232323;

    &__logo {
      height: 120px;
      background: #232323;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 24px;
      font-weight: bold;
    }

    .el-menu {
      border-right: none;
    }
  }

  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      position: absolute;
      font-weight: bold;
      font-size: 20px;
      left: 2%;
    }

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>